<template>
  <div>
    <!-- 动态class,语法上的注意
    1.值为一个对象,键名代表class名字,值为布尔值
    bool为ture代表生效,为false代表不生效
    2.动态class和普通class可以共存
    3.动态class只是赋值绑定class,样式覆盖规则不变 -->
    <h1 :class="{ redStr: bool }" class="gennr">
      bool为ture代表class生效,为false代表class不生效
    </h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: true,
    };
  },
};
</script>

<style>
.redStr {
  color: red;
}
.gennr {
  color: pink;
}
</style>